<template>
  <li>
    <header>Class和Style绑定</header>
    <ul>
      <li>
        绑定HTML Class
        <ol>
          <li>对象语法</li>
          <li>数组语法</li>
          <li>用在组件上</li>
        </ol>
        <class-binding class="foo bar" v-bind:class="{active: isActive}"/>
      </li>
      <li>
        绑定内联样式
        <ol>
          <li>对象语法</li>
          <li>数组语法</li>
          <li>自动添加前缀</li>
          <li>多重值</li>
        </ol>
        <style-binding/>
      </li>
    </ul>
  </li>
</template>

<script>
import ClassBinding from "./samples/ClassBinding";
import StyleBinding from "./samples/StyleBinding";

export default {
  name: "ClassAndStyle",
  components: { ClassBinding, StyleBinding },
  data() {
    return {
      isActive: true
    };
  }
};
</script>